<template>
  <div>
    酒店
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.onLoad = function() {
      var map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [116.397428, 39.90923], //中心点坐标
        viewMode: "3D" //使用3D视图
      });
      // 创建一个 Marker 实例:点标记
      var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京",
        offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
        content: "<h2>北京</h2>", // 自定义点标记覆盖物内容
        icon: "//vdata.amap.com/icons/b18/1/2.png" // 添加 Icon 图标 URL
      });
      map.add(marker);

      //添加插件
      AMap.plugin("AMap.ToolBar", function() {
        //异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
      });
    };
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=8c451c6e8b9f13258eab4cc1819a810f&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }
};
</script>

<style lang="less" scoped>
#container {
  width: 500px;
  height: 360px;
}
</style>